<template>
  <div id="monitoring">
    <div class="monitor-h">
      <Row class="header-h col-fff">
        <i-col span="24">
          <div id="monitorBtn">
            <m-tabs :btnText="btncharacter" @changeBtn="toggleComponent" :activeDateBtn="activeName"
            ></m-tabs>
          </div>
        </i-col>
      </Row>
    </div>
    <div class="monitor-m">
<!--      左侧系统图-->
      <Row :gutter="10" class="air-pressure" v-show="activeIndex === 0">
        <i-col span="24">
          <div class="main-l" id="main-l">
            <div class="lines" v-show="selectName === '冷却系统'">
              <line-tip :pipeText="WaterText" :pipeColor1="pipeColor1" :textColor1="textColor1" :pipeColor2="pipeColor2"
                        :textColor2="textColor2"></line-tip>
            </div>
            <div class="base-select">
              <select-btn @select="showProject"
                          :selectedValue="projectName"
                          :dataList="list"
                          :widthData="widthData"
              ></select-btn>
            </div>
            <div id="cooling-system" v-show="selectName === '冷却系统'">
            </div>
            <div id="air-source-system" v-show="selectName === '气源系统'">
            </div>
          </div>
        </i-col>
<!--        右侧表-->
<!--        <i-col span="4">-->
<!--          <div class="main-r">-->
<!--            <div class="fieldset">-->
<!--              <div class="field-title one-field">{{environmentTitle}}</div>-->
<!--              <div class="field-list">-->
<!--                <ul class="fieldtable-list">-->
<!--                  <li v-for="(item,index) in environment" :key="index">-->
<!--                    <div style="height: 44px">-->
<!--                      <p>{{item.value}}</p>-->
<!--                      <p>{{item.dataType}} <span v-if="item.unit">({{item.unit}})</span></p>-->
<!--                    </div>-->
<!--                  </li>-->
<!--                </ul>-->
<!--              </div>-->
<!--            </div>-->
<!--            <div class="fieldset">-->
<!--              <div class="field-title tow-field">{{freezeTitle}}</div>-->
<!--              <div class="field-list">-->
<!--                <ul class="fieldtable-list">-->
<!--                  <li v-for="(item,index) in freeze" :key="index">-->
<!--                    <div style="height: 44px">-->
<!--                      <p>{{item.value}}</p>-->
<!--                      <p>{{item.dataType}} <span v-if="item.unit">({{item.unit}})</span></p>-->
<!--                    </div>-->
<!--                  </li>-->
<!--                </ul>-->
<!--              </div>-->
<!--            </div>-->
<!--            <div class="fieldset">-->
<!--              <div class="field-title three-field">{{coolingTitle}}</div>-->
<!--              <div class="field-list">-->
<!--                <ul class="fieldtable-list">-->
<!--                  <li v-for="(item,index) in cooling" :key="index">-->
<!--                    <div style="height: 44px">-->
<!--                      <p>{{item.value}}</p>-->
<!--                      <p>{{item.dataType}} <span v-if="item.unit">({{item.unit}})</span></p>-->
<!--                    </div>-->
<!--                  </li>-->
<!--                </ul>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--        </i-col>-->
      </Row>
      <div class="use-gas" v-show="activeIndex === 1">
        <div id="wrapper" style="padding: 0;" class="top-canvas" ref="wrapper">
          <div id="onePipeAir"></div>
        </div>
        <div class="bottom-table">
          <div class="table-b">
            <ul class="table-b-list">
              <li v-for="(item, index) in tableOneCol" :key="index">{{item}}</li>
            </ul>
            <ul class="table-b-list" v-for="(item, index) in tableOtherCol" :key="index">
              <li v-for="(subItem, subIndex) in item.data" :key="subIndex">{{subItem.value}}
                <span>{{subItem.unit}}</span></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="use-gas" v-show="activeIndex === 2">
        <div id="alpie" class="top-canvas" ref="wrapper">
          <div id="all-pipe-air"></div>
        </div>
        <div class="bottom-table">
          <div class="table-b">
            <ul class="table-b-list">
              <li v-for="(item, index) in tableWorkshop" :key="index">{{item}}</li>
            </ul>
            <ul class="table-b-list" v-for="(item, index) in tableWorkshopData" :key="index">
              <li v-for="(subItem, subIndex) in item.data" :key="subIndex">{{subItem.value}}
                <span>{{subItem.unit}}</span></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {mapState} from 'vuex'
  import mTabs from '../../../components/common/mTabs'
  import lineTip from '@/components/common/lineTip'
  import selectBtn from '@/components/common/selectBtn'
  import {imgHash} from '@/util/imgFilter'
  import {FlowingSupport} from '../../../../static/qunee/flowPrototype'

  export default {
    name: 'monitoring',
    props: {},
    data () {
      return {
        // 供气计量 确定 开关 只请求一次， 画一次 的 canvas 需要的 参数
        isBtn1: true,
        // end
        btncharacter: [],
        activeName: -1,
        activeIndex: 0,
        // sort: '冷却水供水',
        WaterText: {
          waterIn: '冷却水供水',
          waterOut: '冷却水回水'
        },
        pipeColor1: 'line-color1',
        textColor1: {color: 'rgba(119, 224, 253, 1)'},
        pipeColor2: 'line-color2',
        textColor2: {color: 'rgba(122, 173, 255, 1)'},
        list: [
          {key: '1', value: '气源系统'},
          {key: '2', value: '冷却系统'}
        ],
        projectName: { // 当子组件的选择值改变而改变的值
          key: '1',
          value: '气源系统'
        },
        widthData: '100px',
        selectName: '气源系统',
        // end
        // 空压机房环境参数
        environmentTitle: '',
        environment: [],
        // 空压机房冷却参数
        coolingTitle: '',
        cooling: [],
        // 空压机房冷冻参数
        freezeTitle: '',
        freeze: [],
        // 供冷计量的表格数据
        tableOneCol: [],
        // canvas 绘图需要的 数组
        tableOtherColCanvas: [],
        // 默认的数据 数组
        tableOtherCol: [],
        // 总装车间的的表格数据 start
        tableWorkshop: [],
        // canvas 绘图需要的 数组
        tableWorkshopCanvas: [],
        // 默认的数据 数组
        tableWorkshopData: [],
        // 表格刷新定时器
        monTimer: null,
        // start
        isShowGraph: true,
        // qunee实例对象
        airSourceGraph: null,
        // 气源系统下的图 start
        // 六边形高宽比例
        hexagonWidth: 84,
        hexagonHeight: 96,
        // 空压机
        airCompressor: [],
        // 干燥机
        dryingMachine: [],
        // 储气罐
        gasholder: [],
        // 冷干机
        dryer: [],
        // 冷却系统
        coolingGraph: null,
        // 空压机
        coolingAirData: [],
        // 冷却塔
        coolingTower: [],
        // 干燥机
        coolingDrying: [],
        // 冷干机
        coolingDryer: [],
        // 冷却泵
        coolingPump: [],
        // 定时器刷新 各个设备运行状态
        timer: null,
        /*
        供气计量
        */
        oneGraph: null,
        // 流动动画
        flowObj: null,
        oneWidth: 900,
        oneHeight: 265,
        // graph实例
        allPipe: null,
        allFlowObj: null,
        // 六边形大小
        sexangleWidth: 88,
        sexangleHeight: 100,
        // 设备数组
        devicesArr: [
          // {
          //   name: '1#螺杆机',
          //   status: 0
          // },
          // {
          //   name: '2#螺杆机',
          //   status: 2
          // },
          // {
          //   name: '3#离心机',
          //   status: 1
          // },
          {
            name: '4#离心机',
            pic: '1001',
            status: 0
          },
          {
            name: '5#离心机',
            pic: '1001',
            status: 2
          },
          {
            name: '6#离心机',
            pic: '1001',
            status: 2
          },
          {
            name: '1#螺杆机',
            pic: '1001',
            status: 0
          },
          {
            name: '2#螺杆机',
            pic: '1001',
            status: 2
          },
          {
            name: '3#离心机',
            pic: '1001',
            status: 1
          },
          {
            name: '4#离心机',
            pic: '1001',
            status: 0
          }
        ],
        // end
        // 总装车间 一次开关
        // 7月01日新需求的各个设备的ID 对象
        idObj: {},
        // commonTime: null,
        // 空压供气计量表格刷新的定时器
        AirComOneTime: null,
        // 空压总装车间表格刷新的定时器
        AirComTotalTime: null,
        // 空压系统图内文字定时器
        AirLabelTime: null
      }
    },

    created () {
      // this.monitorTimer(2000)
    },
    mounted () {
      // 公共数据的方法
      // this.commonTime = setTimeout(() => {
      //   this.commonGetData()
      // }, 500)
      this.commonGetData()
    },
    computed: {
      ...mapState('user', {
        facility: state => state.facility
      })
    },
    methods: {
      // 刷新数据的 方法
      refreshData () {
        this.commonGetData()
      },
      // 获取按钮文本的方法
      _getTabs () {
        let params = {
          type: 100,
          spaceId: this.facility
        }
        return window.myapi.getTabs(params).then(res => {
          return res.data.data
        }).catch((e) => {
        })
      },
      // 获取设备id的方法
      _getTabsDevids (params) {
        return window.myapi.getTabsDevids(params).then(res => {
          return res.data.data
        }).catch((e) => {
        })
      },
      // 异步清空所有数据的方法
      allEmpty () {
        // 分页mTabs 的数据和 激活的清空
        this.btncharacter = []
        // 右侧三个表格的数据清空
        this.environment = []
        this.freeze = []
        this.cooling = []
        // 清空定时器
        clearTimeout(this.monTimer)
        // 气源系统图数据 || 冷却系统图数据 的定时器
        clearTimeout(this.timer)
        // 空压下 供气计量表格定时器
        clearTimeout(this.airComOneTime)
        // 空压下 总装车间表格定时器
        clearTimeout(this.AirComTotalTime)
        window.clearInterval(this.AirLabelTime)
        // 清空 qunee 实例
        if (this.airSourceGraph) {
          // 销毁气源系统图实例 airSourceGraph
          this.airSourceGraph.destroy()
          this.airSourceGraph = null
        }
        if (this.coolingGraph) {
          // 销毁冷却系统图实例 coolingGraph
          this.coolingGraph.destroy()
          this.coolingGraph = null
        }
        if (this.allPipe) {
          // 结束总装车间的动态
          this.allPipe.destroy()
          this.allPipe = null
        }
        if (this.oneGraph) {
          // 结束供气计量的动画动态
          this.oneGraph.destroy()
          this.oneGraph = null
        }
        this.activeName = -1
        this.activeIndex = 0
        // 初始化下拉选中显示的文字为气源系统
        this.projectName = {
          key: 1,
          value: '气源系统'
        }
        // 让选中的文字初始化选中的文字
        this.selectName = this.projectName.value
      },
      // 异步获取公共数据的方法
      async commonGetData () {
        try {
          const btncharacter = await this._getTabs().then(res => res)
          if (!btncharacter.length) {
            this.btncharacter = []
            this.activeName = -1
            this.$Notice.warning({
              title: '提示',
              desc: '站房无数据，请补充数据....'
            })
            return false
          } else {
            this.btncharacter = btncharacter
            this.activeName = btncharacter[0].value
          }
          let params = {
            spaceId: this.activeName
          }
          this.idObj = await this._getTabsDevids(params).then(res => res)
          // 气源系统图数据
          if (this.idObj[0]) {
            // 初始化qunee 实例对象
            this.initAirSourceGraph()
            // 气源系统的异步获取数据
            this.asyncGetSourceData(this.idObj[0])
            // 气源系统的定时器 刷新数据
            this.timerFun(2000)
          }
          // 空压机房右侧 三个表格的数据
          /* if (this.idObj[2]) {
            this.getCompressorList(this.idObj[2]).then(res => {
              this.environmentTitle = res.devName
              let data = res.data
              if (data.length < 6) {
                let arr = Array.from(Array(6 - data.length), (v, k) => k)
                let obj = {unit: '', dataType: '', id: null, value: null}
                this.environment = data.concat(arr).fill(obj, data.length)
              } else {
                this.environment = data
              }
            })
          }
          if (this.idObj[3]) {
            this.getCompressorList(this.idObj[3]).then(res => {
              this.freezeTitle = res.devName
              let data = res.data
              if (data.length < 6) {
                let arr = Array.from(Array(6 - data.length), (v, k) => k)
                let obj = {unit: '', dataType: '', id: null, value: null}
                this.freeze = data.concat(arr).fill(obj, data.length)
              } else {
                this.freeze = data
              }
            })
          }
          if (this.idObj[4]) {
            this.getCompressorList(this.idObj[4]).then(res => {
              this.coolingTitle = res.devName
              let data = res.data
              if (data.length < 6) {
                let arr = Array.from(Array(6 - data.length), (v, k) => k)
                let obj = {unit: '', dataType: '', id: null, value: null}
                this.cooling = data.concat(arr).fill(obj, data.length)
              } else {
                this.cooling = data
              }
            })
          } */
          this.monitorTimer(2000)
        } catch (err) {
          // console.error(err)
        }
      },
      showProject (name) {
        if (this.selectName === name.value) return false
        this.selectName = name.value
        clearTimeout(this.timer)
        if (this.selectName === '冷却系统' && this.activeIndex === 0) {
          if (this.allPipe) {
            // 结束总装车间的动态
            this.allFlowObj.stop()
            this.allPipe.destroy()
            this.allPipe = null
          }
          if (this.oneGraph) {
            // 结束供冷计量的动画动态
            this.flowObj.stop()
            this.oneGraph.destroy()
            this.oneGraph = null
          }
          if (this.airSourceGraph) {
            // 销毁气源系统图
            this.airSourceGraph.destroy()
            this.airSourceGraph = null
          }
          // 初始化冷却系统图数据
          if (this.idObj[1]) {
            // 初始化qunee 实例对象
            this.initCoolingGraph()
            this.asyncCoolingSysData(this.idObj[1])
            // 刷新数据
            this.timerFun(2000)
            // 清掉气源系统文字定时器
            window.clearInterval(this.AirLabelTime)
          }
        }
        if (this.selectName === '气源系统' && this.activeIndex === 0) {
          // clearTimeout(this.timer)
          if (this.allPipe) {
            // 结束总装车间的动态
            this.allFlowObj.stop()
            this.allPipe.destroy()
            this.allPipe = null
          }
          if (this.oneGraph) {
            // 结束供冷计量的动画动态
            this.flowObj.stop()
            this.oneGraph.destroy()
            this.oneGraph = null
          }
          if (this.coolingGraph) {
            // 销毁冷却系统图
            this.coolingGraph.destroy()
            this.coolingGraph = null
          }
          // 初始化气源系统图数据
          if (this.idObj[0]) {
            // 初始化qunee 实例对象
            // 初始化qunee 实例对象
            this.initAirSourceGraph()
            // 制冷机房的异步获取数据
            this.asyncGetSourceData(this.idObj[0])
            // 制冷机房的定时器 刷新数据
            this.timerFun(2000)
          }
        }
      },
      /*
       6月21日 开始弄的 空压系统>工艺监视>供冷计量---总装车间
      ***/
      initOnePipe () {
        if (this.oneGraph === null) {
          this.oneGraph = new Q.Graph('onePipeAir')
          // 禁止编辑图元
          this.oneGraph.editable = false
          this.oneGraph.enableInertia = false
          // this.oneGraph.enableRectangleSelectionByRightButton = false
          // this.oneGraph.enableTooltip = false
          // this.oneGraph.enableWheelZoom = false
          // 禁止双击放大
          this.oneGraph.enableDoubleClickToOverview = false
          // 进制拖拉图元
          // this.oneGraph.interactionMode = Q.Consts.INTERACTION_MODE_VIEW
          this.oneGraph.interactionMode = false
          this.oneGraph.originAtCenter = false
          this.oneGraph.moveToCenter()
          // 监听鼠标的坐标
          // this.oneGraph.onmousemove = evt => {
          //   var p = this.oneGraph.globalToLocal(evt)
          //   document.getElementById('cont').innerHTML = '坐标：x******' + p.x + ', y******' + p.y
          // }
          // this.oneGraph.onclick = evt => {
          //   if (evt.getData() instanceof Q.Node) {
          //     Q.log(evt)
          //     var p = this.oneGraph.globalToLocal(evt)
          //     Q.log(p.x, p.y)
          //     this.oneGraph.centerTo(p.x, p.y, 1)
          //   }
          //
          // }
          // this.oneGraph.ondblclick = evt => {
          //   var node = this.oneGraph.getElementByMouseEvent(evt)
          //   if (node === undefined) {
          //     // 点空白地方，移到画布中心显示
          //     this.oneGraph.moveToCenter()
          //   }
          // }
          // 添加动画
          this.flowObj = new FlowingSupport(this.oneGraph, 'arrow', 20)
        }
      },
      // 制冷系统的 文字
      onePipeName (name, x, y, flag) {
        let curNode = flag ? this.allPipe.createNode(name, x, y) : this.oneGraph.createNode(name, x, y)
        curNode.image = null
        curNode.setStyle(Q.Styles.LABEL_COLOR, '#4C90FD')
        curNode.setStyle(Q.Styles.LABEL_FONT_SIZE, 18)
      },
      // 三角形
      oneShape (name, x, y, rotate, flag) {
        let curNode = flag ? this.allPipe.createNode('', x, y) : this.oneGraph.createNode('', x, y)
        curNode.image = Q.Shapes.getAllShapes(12, 24)[name]
        curNode.rotate = Math.PI / rotate
        curNode.setStyle(Q.Styles.SHAPE_FILL_COLOR, '#4C90FD')
      },
      // 横的水平线
      oneHoLine (startX, startY, endX, endY, flag) {
        let a = flag ? this.allPipe.createNode('', startX, startY) : this.oneGraph.createNode('', startX, startY)
        a.image = null
        let b = flag ? this.allPipe.createNode('', endX, endY) : this.oneGraph.createNode('', endX, endY)
        b.image = null
        let edge = flag ? this.allPipe.createEdge(a, b) : this.oneGraph.createEdge(a, b)
        edge.zIndex = 5
        edge.setStyle(Q.Styles.EDGE_COLOR, '#4C90FD')
        edge.setStyle(Q.Styles.EDGE_WIDTH, 10)
        edge.setStyle(Q.Styles.ARROW_TO, false)
      },
      // 图形的方法
      shapes (name, x, y, sizeLeft, sizeRight, rotate, flag) {
        let curNode = flag ? this.allPipe.createNode('', x, y) : this.oneGraph.createNode('', x, y)
        curNode.image = Q.Shapes.getAllShapes(sizeLeft, sizeRight)[name]
        curNode.rotate = Math.PI / rotate
        curNode.setStyle(Q.Styles.SHAPE_FILL_COLOR, '#4C90FD')
      },
      // 垂直的水平线
      oneVerLine (arr, startX, startY, endX, endY) {
        let a, b, edge
        for (let i = 0; i < arr; i++) {
          a = this.oneGraph.createNode('', startX + i * 166, startY)
          a.image = null
          b = this.oneGraph.createNode('', endX + i * 166, endY)
          b.image = null
          edge = this.oneGraph.createEdge(a, b)
          edge.setStyle(Q.Styles.EDGE_COLOR, '#4C90FD')
          edge.setStyle(Q.Styles.EDGE_WIDTH, 8)
          edge.setStyle(Q.Styles.ARROW_TO, false)
          // 图形的方法
          // 三角形
          this.shapes('triangle', (startX + i * 166), (this.oneHeight - 60), 10, 20, 2)
          // 矩形 rect
          this.shapes('rect', (startX + i * 166), (this.oneHeight - 50), 4, 20, 2)
          // 四个设备 阀门
          this.oneMachinePipe('blueTop', (startX + i * 166 + 10), -(this.oneHeight - 180), 40, 1)
          this.oneMachinePipe('blueMiddle', (startX + i * 166 + 13), -(this.oneHeight - 230), 40, 1)
          this.oneMachinePipe('blueBottom', (startX + i * 166 + 18), (this.oneHeight - 240), 30, 1)
          this.oneMachinePipe('blueBottom', (startX + i * 166 + 18), (this.oneHeight - 180), 30, 1)
        }
      },
      // 垂直的水平线的设备
      oneMachinePipe (color, x, y, height, rotate) {
        let curNode = this.oneGraph.createNode('', x, y)
        curNode.image = color
        curNode.zIndex = 3
        curNode.rotate = (Math.PI / rotate) * 1 / 2
        curNode.size = {height: height}
      },
      // end
      // 切换空压机房  供气计量
      toggleComponent (name, index) {
        if (this.activeName === name) return false
        this.activeName = name
        this.activeIndex = index
        if (this.activeIndex === 0) {
          this.projectName = {
            key: 1,
            value: '气源系统'
          }
          this.selectName = this.projectName.value
          if (this.selectName === '气源系统') {
            // 初始化气源系统图 实例对象
            this.initAirSourceGraph()
            // 气源系统图异步获取数据
            this.asyncGetSourceData(this.idObj[0])
          }
          if (this.allPipe) {
            // 结束总装车间的动态
            this.allFlowObj.stop()
            this.allPipe.destroy()
            this.allPipe = null
          }
          if (this.oneGraph) {
            // 结束供冷计量的动画动态
            this.flowObj.stop()
            this.oneGraph.destroy()
            this.oneGraph = null
          }
          if (this.coolingGraph) {
            // 销毁冷却系统图
            this.coolingGraph.destroy()
            this.coolingGraph = null
          }
          // 清除定时器
          clearTimeout(this.monTimer)
          clearTimeout(this.timer)
          clearTimeout(this.airComOneTime)
          clearTimeout(this.AirComTotalTime)
          window.clearInterval(this.AirLabelTime)
          // 右侧 三个表格的数据
          /* if (this.idObj[2]) {
            this.getCompressorList(this.idObj[2]).then(res => {
              this.environmentTitle = res.devName
              let data = res.data
              if (data.length < 6) {
                let arr = Array.from(Array(6 - data.length), (v, k) => k)
                let obj = {unit: '', dataType: '', id: null, value: null}
                this.environment = data.concat(arr).fill(obj, data.length)
              } else {
                this.environment = data
              }
            })
          }
          if (this.idObj[3]) {
            this.getCompressorList(this.idObj[3]).then(res => {
              this.freezeTitle = res.devName
              let data = res.data
              if (data.length < 6) {
                let arr = Array.from(Array(6 - data.length), (v, k) => k)
                let obj = {unit: '', dataType: '', id: null, value: null}
                this.freeze = data.concat(arr).fill(obj, data.length)
              } else {
                this.freeze = data
              }
            })
          }
          if (this.idObj[4]) {
            this.getCompressorList(this.idObj[4]).then(res => {
              this.coolingTitle = res.devName
              let data = res.data
              if (data.length < 6) {
                let arr = Array.from(Array(6 - data.length), (v, k) => k)
                let obj = {unit: '', dataType: '', id: null, value: null}
                this.cooling = data.concat(arr).fill(obj, data.length)
              } else {
                this.cooling = data
              }
            })
          } */
          this.monitorTimer(2000)
          this.timerFun(2000)
        }
        if (this.activeIndex === 1) {
          if (this.allPipe) {
            // 结束总装车间的动态
            this.allFlowObj.stop()
            this.allPipe.destroy()
            this.allPipe = null
          }
          if (this.airSourceGraph) {
            clearTimeout(this.timer)
            this.airSourceGraph.destroy()
            this.airSourceGraph = null
          }
          if (this.coolingGraph) {
            clearTimeout(this.timer)
            this.coolingGraph.destroy()
            this.coolingGraph = null
          }
          // 清除定时器
          clearTimeout(this.monTimer)
          // clearTimeout(this.timer)
          clearTimeout(this.airComOneTime)
          window.clearInterval(this.AirLabelTime)
          this.initOnePipe()
          // 空压机房的异步获取数据定时刷新
          this.asyncGasTableData({
            spaceId: this.activeName
          })
          this.monitorTimer(2000)
        }
        if (this.activeIndex === 2) {
          if (this.oneGraph) {
            // 结束供冷计量的动画动态
            this.flowObj.stop()
            this.oneGraph.destroy()
            this.oneGraph = null
          }
          if (this.airSourceGraph) {
            this.airSourceGraph.destroy()
            this.airSourceGraph = null
          }
          if (this.coolingGraph) {
            this.coolingGraph.destroy()
            this.coolingGraph = null
          }
          clearTimeout(this.monTimer)
          clearTimeout(this.timer)
          clearTimeout(this.airComOneTime)
          clearTimeout(this.AirComTotalTime)
          window.clearInterval(this.AirLabelTime)
          this.initAllPipe()
          // 异步 绘图 canvas 需要 根据 获取 数据的  length 个数决定
          this.asyncGasTableDataTotal({
            spaceId: this.activeName
          })
        }
        if (this.activeIndex === 3) {
          // 清除定时器
          clearTimeout(this.monTimer)
          clearTimeout(this.timer)
          clearTimeout(this.airComOneTime)
          clearTimeout(this.AirComTotalTime)
          window.clearInterval(this.AirLabelTime)
        }
      },
      // 初始化总装车间graph实例
      initAllPipe () {
        if (this.allPipe === null) {
          this.allPipe = new Q.Graph('all-pipe-air')
          // 禁止编辑图元
          this.allPipe.editable = false
          // 禁止双击放大
          this.allPipe.enableDoubleClickToOverview = false
          // 禁止拖拉图元
          this.allPipe.interactionMode = false
          this.allPipe.originAtCenter = false
          this.allPipe.enableInertia = false
          this.allPipe.moveToCenter()
          // this.allPipe.onclick = evt => {
          //   if (evt.getData() instanceof Q.Node) {
          //     // Q.log(evt)
          //     var p = this.allPipe.globalToLocal(evt)
          //     // Q.log(p.x, p.y)
          //     this.allPipe.centerTo(p.x, p.y, 1)
          //   }
          // }
          // this.allPipe.ondblclick = evt => {
          //   var node = this.allPipe.getElementByMouseEvent(evt)
          //   if (node === undefined) {
          //     // 点空白地方，移到画布中心显示
          //     this.allPipe.moveToCenter()
          //   }
          // }
          // 添加动画效果
          this.allFlowObj = new FlowingSupport(this.allPipe, 'arrow', 20)
        }
      },
      canvasGraph () {
        // 文字以及三角形
        this.oneShape('triangle', -(this.oneWidth - 80), -(this.oneHeight - 40), 0, true)
        this.onePipeName('供入', -(this.oneWidth - 48), -(this.oneHeight - 40), true)
        // this.oneShape('triangle', -(this.oneWidth - 35), this.oneHeight - 36, 1)
        // 横的水平线
        this.oneHoLine(-(this.oneWidth - 100), -(this.oneHeight - 40), (this.oneWidth - 82), -(this.oneHeight - 40), true)
        // 垂直的 管道和 设备
        this.equipmentNode(this.devicesArr, -(this.oneWidth - 220), -(this.oneHeight - 44), -(this.oneWidth - 220), (this.oneHeight - 60), 36, -(this.oneWidth - 220))
        // 添加流动线
        this.allPipe.forEach(item => {
          if (item instanceof Q.Edge || item instanceof Q.ShapeNode) {
            // console.log('item.get', item.get('color'))
            // 添加流动的效果
            this.allFlowObj.addFlowing(item, 3, true, '#fff')
          }
          if (item.get('obj')) {
            if (item.get('obj').status === 1) {
              if (item instanceof Q.Edge || item instanceof Q.ShapeNode) {
                // 添加流动的效果
                this.allFlowObj.addFlowing(item, 3, true, '#fff')
              }
            } else {
              this.allFlowObj.removeFlowing(item.id)
            }
          }
        })
        // 执行动态
        this.allFlowObj.start()
      },
      // 定时器刷新得到 总装车间的 实时数据
      async totalTimer (id) {
        let hash = {}
        let data = await window.myapi.postTimer({id: id}).then(res => {
          if (res.data.status === 200) {
            return res.data.data.data
          }
        }).catch(e => {
        })
        data.forEach(item => {
          if (typeof item.value !== 'number' && isNaN(item.value)) {
            item.value = 2
          }
          hash[item.id] = item
        })
        for (let k in hash) {
          this.allPipe.forEach((item) => {
              // 这是图片的
              if (item.get('img') == k) {
                let status = item.image.substring(item.image.length - 1)
                if (status == hash[k].value) {
                  return false
                } else {
                  item.image = item.image.replace(status, hash[k].value)
                }
              }
              if (item.get('obj')) {
                // 这是 动画 根据 设备颜色 是否 添加 删除的
                if (item.get('obj').id == k) {
                  if (item.get('obj').status == hash[k].value) {
                    return false
                  } else {
                    if (item.get('obj').status === 1) {
                      // 设备图片是 绿色 要被 替换掉 所以清除动画的 id
                      this.allFlowObj.removeFlowing(item.id)
                      item.get('obj').status = hash[k].value
                    }
                    if (item.get('obj').status !== 1 && hash[k].value === 1) {
                      // 设备图片是 非绿色 要被 替换掉成 绿色, 所以 添加动画的
                      this.allFlowObj.addFlowing(item, 3, true, '#fff')
                      item.get('obj').status = hash[k].value
                    }
                  }
                }
              }
          })
        }
        /* window.myapi.postTimer({id: id}).then(res => {
          if (res.data.status === 200) {
            let data = res.data.data.data
            data.forEach(item => {
              if (typeof item.value !== 'number' && isNaN(item.value)) {
                item.value = 2
              }
              hash[item.id] = item
            })
            this.allPipe.forEach((item) => {
              for (let k in hash) {
                // 这是图片的
                if (item.get('img') == k) {
                  let status = item.image.substring(item.image.length - 1)
                  if (status == hash[k].value) {
                    return false
                  } else {
                    item.image = item.image.replace(status, hash[k].value)
                  }
                }
                if (item.get('obj')) {
                  // 这是 动画 根据 设备颜色 是否 添加 删除的
                  if (item.get('obj').id == k) {
                    if (item.get('obj').status == hash[k].value) {
                      return false
                    } else {
                      if (item.get('obj').status === 1) {
                        // 设备图片是 绿色 要被 替换掉 所以清除动画的 id
                        this.allFlowObj.removeFlowing(item.id)
                        item.get('obj').status = hash[k].value
                      }
                      if (item.get('obj').status !== 1 && hash[k].value === 1) {
                        // 设备图片是 非绿色 要被 替换掉成 绿色, 所以 添加动画的
                        this.allFlowObj.addFlowing(item, 3, true, '#fff')
                        item.get('obj').status = hash[k].value
                      }
                    }
                  }
                }
              }
            })
          }
        }).catch((e) => {
        }) */
      },
      // 总装车间的垂直的水平线
      equipmentNode (arr, startX, startY, endX, endY, heightSize, x) {
        let curNode, index, sexangle, a, b, edge, dir
        dir = 166
        for (let i = 0; i < arr.length; i++) {
          b = this.allPipe.createNode('', endX + i * dir, endY)
          a = this.allPipe.createNode('', startX + i * dir, startY)
          a.image = null
          // b = this.allPipe.createNode('', endX + i * 166, endY)
          b.image = null
          edge = this.allPipe.createEdge(a, b)
          edge.set('obj', arr[i])
          edge.setStyle(Q.Styles.EDGE_COLOR, '#4C90FD')
          edge.setStyle(Q.Styles.EDGE_WIDTH, 8)
          edge.setStyle(Q.Styles.ARROW_TO, false)
          index = arr[i].name.indexOf('#')
          curNode = this.allPipe.createNode('', (x + dir * i), (startY + endY) / 2)
          curNode.image = imgHash[arr[i].pic] + arr[i].status
          // curNode.image = imgHash[arr[i].name.substring(index + 1)] + arr[i].status
          curNode.size = {height: heightSize}
          curNode.zIndex = 2
          // 六边形
          sexangle = this.allPipe.createNode('', x + dir * i, (startY + endY) / 2)
          sexangle.image = Q.Shapes.getAllShapes(this.sexangleHeight, this.sexangleWidth)['hexagon']
          sexangle.rotate = Math.PI / 2
          sexangle.zIndex = 1
          sexangle.setStyle(Q.Styles.SHAPE_FILL_COLOR, '#4C90FD')
          // 图形的方法
          // 三角形
          this.shapes('triangle', (startX + i * dir), (this.oneHeight - 60), 10, 20, 2, true)
          // 矩形 rect
          this.shapes('rect', (startX + i * dir), (this.oneHeight - 50), 4, 20, 2, true)
        }
      },
      // end
      // 工艺监视页面的定时器
      monitorTimer (s) {
        let count = 0
        const time = () => {
          this.monTimer = setTimeout(() => {
            count += 3
            if (count > 30) {
              clearTimeout(this.monTimer)
              count = 0
            }
            if (this.activeIndex === 0) {
              // 空压机房右侧 三个表格的数据
             /* if (this.idObj[2]) {
                this.getCompressorList(this.idObj[2]).then(res => {
                  this.environmentTitle = res.devName
                  let data = res.data
                  if (data.length < 6) {
                    let arr = Array.from(Array(6 - data.length), (v, k) => k)
                    let obj = {unit: '', dataType: '', id: null, value: null}
                    this.environment = data.concat(arr).fill(obj, data.length)
                  } else {
                    this.environment = data
                  }
                })
              }
              if (this.idObj[3]) {
                this.getCompressorList(this.idObj[3]).then(res => {
                  this.freezeTitle = res.devName
                  let data = res.data
                  if (data.length < 6) {
                    let arr = Array.from(Array(6 - data.length), (v, k) => k)
                    let obj = {unit: '', dataType: '', id: null, value: null}
                    this.freeze = data.concat(arr).fill(obj, data.length)
                  } else {
                    this.freeze = data
                  }
                })
              }
              if (this.idObj[4]) {
                this.getCompressorList(this.idObj[4]).then(res => {
                  this.coolingTitle = res.devName
                  let data = res.data
                  if (data.length < 6) {
                    let arr = Array.from(Array(6 - data.length), (v, k) => k)
                    let obj = {unit: '', dataType: '', id: null, value: null}
                    this.cooling = data.concat(arr).fill(obj, data.length)
                  } else {
                    this.cooling = data
                  }
                })
              } */
            } else if (this.activeIndex === 1) {
              // 定时刷新供气计量的数据
              this.refreshGasTable()
            } else {
              // 定时刷新总装车间的数据
              this.refreshAllTable()
            }
            time()
          }, s)
        }
        time()
      },
      // 刷新总装车间的表格数据
      refreshAllTable () {
        let tableIdArr = this.tableWorkshopCanvas.map(item => item.devId)
        for (let i = 0; i < tableIdArr.length; i++) {
          (() => {
            this.AirComTotalTime = setTimeout(() => {
              window.myapi.postTimer({id: tableIdArr[i]}).then(res => {
                if (res.data.status === 200) {
                  this.tableWorkshopData = this.tableWorkshopData.map(item => {
                    if (item.devId === res.data.data.devId) {
                      item = {
                        ...item,
                        ...res.data.data,
                        ...res.data.data.data.unshift({
                          unit: '',
                          dataType: '',
                          value: item.devName
                        })
                      }
                    }
                    return item
                  })
                }
              }).catch((e) => {
              })
            }, 1000 * i)
          })()
        }
      },
      // 刷新供气计量表格数据
      refreshGasTable () {
        let tableIdArr = this.tableOtherColCanvas.map(item => item.devId)
        for (let i = 0; i < tableIdArr.length; i++) {
          (() => {
            this.AirComOneTime = setTimeout(() => {
              window.myapi.postTimer({id: tableIdArr[i]}).then(res => {
                if (res.data.status === 200) {
                  this.tableOtherCol = this.tableOtherCol.map(item => {
                    if (item.devId === res.data.data.devId) {
                      item = {
                        ...item,
                        ...res.data.data,
                        ...res.data.data.data.unshift({
                          unit: '',
                          dataType: '',
                          value: item.devName
                        })
                      }
                    }
                    return item
                  })
                }
              }).catch((e) => {
              })
            }, 1000 * i)
          })()
        }
      },
      // 空压机房右侧三个表请求数据的方法
      getCompressorList (id) {
        return new Promise((resolve, reject) => {
          new window.Api({
            ...{id: id}
          }, 'POST').getComporData().then(res => {
            if (res.data.status === 200) {
              resolve(res.data.data)
            }
          }).catch(function (e) {
          })
        })
      },
      // 供气计量下表格数据处理
      async asyncGasTableData (data) {
        await this.getGasTableData(data).then(res => {
          let tableOneCol = null
          if (res.cols.length > 0) {
            tableOneCol = res.cols
            tableOneCol.unshift('用冷对象')
            this.tableOneCol = tableOneCol
          }
          if (res.values.length < 10) {
            this.tableOtherColCanvas = res.values.map(item => {
              item.data.unshift({unit: '', dataType: '', value: item.devName})
              let obj = {...item}
              return obj
            })
            let arr = Array.from(Array(10 - this.tableOtherColCanvas.length), (v, k) => k)
            let dataObj = {
              devId: '',
              devName: '',
              data: [{unit: '', dataType: '', value: ''}, {unit: '', dataType: '', value: ''}, {
                unit: '',
                dataType: '',
                value: ''
              }, {
                unit: '',
                dataType: '',
                value: ''
              }, {unit: '', dataType: '', value: ''}, {unit: '', dataType: '', value: ''}],
              ctrlProcess: []
            }
            this.tableOtherCol = this.tableOtherColCanvas.concat(arr).fill(dataObj, this.tableOtherColCanvas.length)
          } else {
            this.tableOtherColCanvas = res.values.map(item => {
              item.data.unshift({unit: '', dataType: '', value: item.devName})
              let obj = {...item}
              return obj
            })
            this.tableOtherCol = [...this.tableOtherColCanvas]
          }
        })
        // 文字以及三角形
        // this.onePipeName('', -(this.oneWidth), this.oneHeight - 36)
        this.oneShape('triangle', -(this.oneWidth - 80), -(this.oneHeight - 40), 0)
        this.onePipeName('冷站', -(this.oneWidth - 48), -(this.oneHeight - 40))
        // this.oneShape('triangle', -(this.oneWidth - 35), this.oneHeight - 36, 1)
        // 横的水平线
        this.oneHoLine(-(this.oneWidth - 100), -(this.oneHeight - 40), (this.oneWidth - 82), -(this.oneHeight - 40))
        // this.oneHoLine((this.oneWidth - 151), (this.oneHeight - 34), -(this.oneWidth - 55), (this.oneHeight - 34))
        // 垂直的水平线
        this.oneVerLine(this.tableOtherColCanvas.length, -(this.oneWidth - 220), -(this.oneHeight - 44), -(this.oneWidth - 220), (this.oneHeight - 60))
        // 添加流动线
        this.oneGraph.forEach(item => {
          if (item instanceof Q.Edge || item instanceof Q.ShapeNode) {
            // console.log('item.get', item.get('color'))
            // 添加流动的效果
            this.flowObj.addFlowing(item, 3, true, '#fff')
          }
        })
        // 执行动态
        this.flowObj.start()
      },
      // 总装车间下面表格的数据处理
      async asyncGasTableDataTotal (data) {
        await this.getGasTableData(data).then(res => {
          let tableWorkshop = null
          if (res.cols.length > 0) {
            tableWorkshop = res.cols
            tableWorkshop.unshift('用冷对象')
            this.tableWorkshop = tableWorkshop
          }
          if (res.values.length < 10) {
            this.tableWorkshopCanvas = res.values.map(item => {
              item.data.unshift({unit: '', dataType: '', value: item.devName})
              let obj = {...item}
              return obj
            })
            let arr = Array.from(Array(10 - this.tableWorkshopCanvas.length), (v, k) => k)
            let dataObj = {
              devId: '',
              devName: '',
              data: [{unit: '', dataType: '', value: ''}, {unit: '', dataType: '', value: ''}, {
                unit: '',
                dataType: '',
                value: ''
              }, {
                unit: '',
                dataType: '',
                value: ''
              }, {unit: '', dataType: '', value: ''}, {unit: '', dataType: '', value: ''}],
              ctrlProcess: []
            }
            this.tableWorkshopData = this.tableWorkshopCanvas.concat(arr).fill(dataObj, this.tableWorkshopCanvas.length)
          } else {
            this.tableWorkshopCanvas = res.values.map(item => {
              item.data.unshift({unit: '', dataType: '', value: item.devName})
              let obj = {...item}
              return obj
            })
            this.tableWorkshopData = [...this.tableWorkshopCanvas]
          }
        })
        this.canvasGraph()
      },
      // 供气计量下表格数据请求数据方法
      getGasTableData (data = {}) {
        return window.myapi.getCoolingOrAir(data).then(res => {
          if (res.data.status === 200) {
            return res.data.data
          }
        })
      },
      // 空压机房的气源系统
      // 定时请求气源系统和冷却系统图数据
      timerFun (s) {
        let count = 0
        const time = () => {
          this.timer = setTimeout(() => {
            count += 3
            if (count > 30) {
              clearTimeout(this.timer)
              count = 0
            }
            this.selectName === '气源系统' ? this.refAirComprSys(this.idObj[0]) : this.refCoolingSys(this.idObj[1])
            time()
          }, s)
        }
        time()
      },
      //  qunee 实例气源系统图文字定时刷新
      getAirSourceLabel (item) {
        window.myapi.postTimer({id: item.get('meterId')}).then(res => {
          if (res.data.status === 200) {
            let data = res.data.data.data
            let str = ''
            if (data.length > 0) {
              for (let i = 0; i < data.length; i++) {
                str = str + data[i].alias + ':' + data[i].value + data[i].unit + '\n'
              }
            }
            // 字符串赋值到上面
            item.set('airSourceLabel', str)
          }
        }).catch((e) => {
        })
      },
      // 解决异步定时更新实时数据 气源系统图数据
      async refAirComprSys (id) {
        let hash = {}
        let result = await window.myapi.postTimer({id: id}).then(res => {
          if (res.data.status === 200) {
            return res.data.data.data
          }
        }).catch(function (e) {
        })
        result.forEach(item => {
          if (typeof item.value !== 'number' && isNaN(item.value)) {
            item.value = 2
          }
          hash[item.id] = item
        })
        if (this.airSourceGraph) {
          for (let i in hash) {
            this.airSourceGraph.forEach(item => {
              if (item.get('hashId') == i || item.get('sixId') == i) {
                  let status = item.image.substring(item.image.length - 1)
                  if (status === hash[i].value) {
                    return false
                  } else {
                    item.image = item.image.replace(status, hash[i].value)
                  }
                }
            })
          }
        }
        /* window.myapi.postTimer({id: id}).then(res => {
          if (res.data.status === 200) {
            let result = res.data.data.data
            // console.log(result)
            result.forEach(item => {
              if (typeof item.value !== 'number' && isNaN(item.value)) {
                item.value = 2
              }
              hash[item.id] = item
            })
            if (this.airSourceGraph) {
              this.airSourceGraph.forEach(item => {
                for (let i in hash) {
                  // console.log(i)
                  if (item.get('hashId') == i || item.get('sixId') == i) {
                    let status = item.image.substring(item.image.length - 1)
                    if (status === hash[i].value) {
                      return false
                    } else {
                      item.image = item.image.replace(status, hash[i].value)
                    }
                  }
                }
              })
            }
          }
        }) */
      },
      // 请求气源系统graph图数据
      getAirSourceSysData (id) {
        return new Promise((resolve, reject) => {
          new window.Api({
            ...{id: id, spaceId: this.facility}
          }, 'POST').getData().then(res => {
            if (res.data.status === 200) {
              resolve(res.data.jsData)
            }
          }).catch(function (e) {
          })
        })
      },
      // 异步请求气源系统数据
      async asyncGetSourceData (id) {
        await this.getAirSourceSysData(id).then(res => {
          // console.log(res)
          this.airCompressor = res.devices['空压机'].hosts
          this.dryingMachine = res.devices['吸干机'].hosts
          this.gasholder = res.devices['储气罐'].hosts
          this.dryer = res.devices['冷干机'].hosts
        })
        this.canvasAirSource()
      },
      // 绘画气源系统图
      canvasAirSource () {
        // 空压机
        this.createMachineNode(this.airCompressor, -528, -184, 6, 35)
        // 干燥机
        this.createMachineNode(this.dryingMachine, -528, 184, 6, 48)
        //  储气罐
        this.createMachineNode(this.gasholder, -258, 184, 6, 62, true)
        //  冷干机
        this.createMachineNode(this.dryer, 12, 184, 6, 35)
        // 公共设备的名
        this.machineName('空压机', -528, -252, true)
        this.machineName('干燥机', -528, 302, true)
        this.machineName('储气罐', -258, 302, true)
        this.machineName('冷干机', 12, 302, true)
        this.conWorkshop(this.idObj[2], '连接车间', 8 + (this.dryer.length + 7) * 45, 184 + this.hexagonHeight / 2 + 34)
        // if (this.idObj[2]) {
        //   this.conWorkshop(this.idObj[2], '连接车间', 8 + (this.dryer.length + 7) * 45, 184 + this.hexagonHeight / 2 + 34)
        // }
        // 空压机
        this.createHorizontalPipe('blueHorizontal', -522 + (this.airCompressor.length - 1) * 45, -184 + this.hexagonHeight / 2 + 79, ((this.airCompressor.length - 1) * 90))
        // 空压机--干燥机 垂直管道
        this.createVerticalPipe('blueVertical', -522, -184 + this.hexagonHeight / 2 + 80 + 56, 112)
        // 干燥机 上面的横管道
        this.createHorizontalPipe('blueHorizontal', -522 + (this.dryingMachine.length - 1) * 45, 184 - this.hexagonHeight / 2 - 79, ((this.dryingMachine.length - 1) * 90))
        //  干燥机--储气罐 下面的横管道
        this.createHorizontalPipe('blueHorizontal', -522 + (this.dryingMachine.length + 1) * 45, 184 + this.hexagonHeight / 2 + 47, ((this.dryingMachine.length + 1) * 90))
        // 储气罐 下面的横管道
        this.createHorizontalPipe('blueHorizontal', -252 + (this.gasholder.length - 1) * 45, 184 + this.hexagonHeight / 2 + 47, ((this.gasholder.length - 1) * 90))
        // 储气罐 -- 冷干机上面
        this.createHorizontalPipe('blueHorizontal', -252 + (this.gasholder.length + 1) * 45, 184 - this.hexagonHeight / 2 - 79, ((this.gasholder.length + 1) * 90))
        // 冷干机 上面的横管道
        this.createHorizontalPipe('blueHorizontal', 18 + (this.dryer.length - 1) * 45, 184 - this.hexagonHeight / 2 - 79, ((this.dryer.length - 1) * 90))
        // 冷干机 -- 下面的横管道---连接车间
        this.createHorizontalPipe('blueHorizontal', 18 + (this.dryer.length + 2) * 45, 184 + this.hexagonHeight / 2 + 47, ((this.dryer.length + 2) * 90))
        this.airSourceGraph.forEach(item => {
          if (item.get('meterId')) {
            let airSourceLabel = new Q.LabelUI()
            if (this.idObj[2] === item.get('meterId')) {
              // console.log(item.get('meterId'))
              airSourceLabel.position = Q.Position.CENTER_BOTTOM
              airSourceLabel.alignPosition = Q.Position.LEFT_BOTTOM // 文字对齐
              airSourceLabel.anchorPosition = Q.Position.CENTER_BOTTOM
              airSourceLabel.zIndex = 6
              airSourceLabel.offsetY = -30
              airSourceLabel.offsetX = 30
              airSourceLabel.border = 0
              airSourceLabel.padding = new Q.Insets(2, 5)
              airSourceLabel.showPointer = false // 是否显示箭头
              airSourceLabel.backgroundColor = 'rgba(0,0,0,0)'
              airSourceLabel.fontSize = 12
              airSourceLabel.color = '#fff'
              airSourceLabel.size = 110
              item.addUI(airSourceLabel, [{
                property: 'airSourceLabel',
                propertyType: Q.Consts.PROPERTY_TYPE_CLIENT,
                bindingProperty: 'data'
              }, {
                property: 'airSourceLabel.color',
                propertyType: Q.Consts.PROPERTY_TYPE_CLIENT,
                bindingProperty: 'color'
              }])
              // 绑定实时显示属性
              item.set('airSourceLabel', '')
              // this.AirLabelTime = (setInterval(() => {
              //   this.getAirSourceLabel(item)
              // }, 2000))
              this.AirLabelTime = (setInterval(() => {
                this.getAirSourceLabel(item)
              }, 2000 + Math.floor(Math.random() * 500)))
            }
          }
        })
      },
      // 初始化气源系统graph实例
      initAirSourceGraph () {
        if (this.airSourceGraph === null) {
          this.airSourceGraph = new Q.Graph('air-source-system')
          // 禁止编辑图元
          this.airSourceGraph.editable = false
          // 禁止双击放大
          this.airSourceGraph.enableDoubleClickToOverview = false
          // 禁止拖拉图元
          this.airSourceGraph.interactionMode = Q.Consts.INTERACTION_MODE_VIEW
          this.airSourceGraph.originAtCenter = false
          this.airSourceGraph.moveToCenter()
          this.airSourceGraph.onclick = evt => {
            // if (evt.getData() instanceof Q.Node) {
            //   // Q.log(evt)
            //   var p = this.airSourceGraph.globalToLocal(evt)
            //   // Q.log(p.x, p.y)
            //   this.airSourceGraph.centerTo(p.x, p.y, 1)
            // }
            var node = this.airSourceGraph.getElementByMouseEvent(evt)
            if (node === undefined) {
              // 点空白地方，移到画布中心显示
              this.airSourceGraph.moveToCenter()
            }
          }
          // this.airSourceGraph.ondblclick = evt => {
          //   var node = this.airSourceGraph.getElementByMouseEvent(evt)
          //   if (node === undefined) {
          //     // 点空白地方，移到画布中心显示
          //     this.airSourceGraph.moveToCenter()
          //   }
          // }
          this.airSourceGraph.isSelectable = function () {
            return false
          }
        }
      },
      // 气源系统图的设备方法
      // targetList--创建图元的目标数组, pX、 pY--图元的坐标位置, distance--图元之间的间距, heightSize--图元大小
      createMachineNode (targetList, pX, pY, distance, heightSize, flag) {
        var currentNode, index, hexagon, blueVertical, blueArrow, blueControl, verticalpipe, downArrow
        for (let i = 0; i < targetList.length; i++) {
          pX += distance
          index = targetList[i].name.indexOf('#')
          currentNode = this.airSourceGraph.createNode(targetList[i].name.substring(0, index + 1), (pX + this.hexagonWidth * i), pY + 4)
          currentNode.setStyle(Q.Styles.LABEL_ALIGN_POSITION, Q.Position.CENTER_TOP)
          currentNode.setStyle(Q.Styles.LABEL_PADDING, heightSize > 60 ? (-heightSize - 12) : (heightSize > 40 && heightSize < 60) ? (-heightSize - 15) : (-heightSize - 20))
          currentNode.setStyle(Q.Styles.BACKGROUND_COLOR, null)
          currentNode.size = {height: heightSize}
          currentNode.image = imgHash[targetList[i].pic] + targetList[i].status
          // currentNode.image = imgHash[targetList[i].name.substring(index + 1)] + targetList[i].status
          currentNode.zIndex = 2
          currentNode.set('hashId', targetList[i].id)
          // console.log(currentNode.get('hashId'))
          if (targetList[i].status === 2) {
            currentNode.setStyle(Q.Styles.LABEL_COLOR, '#CB404A')
          } else {
            currentNode.setStyle(Q.Styles.LABEL_COLOR, '#BECEFF')
          }
          // 六边形
          hexagon = this.airSourceGraph.createNode('', pX + this.hexagonWidth * i, pY)
          hexagon.image = 'sixEdge' + targetList[i].status
          hexagon.zIndex = 1
          hexagon.size = {width: this.hexagonWidth, height: this.hexagonHeight}
          hexagon.set('sixId', targetList[i].id)
          currentNode.addChild(hexagon)
          // 蓝色垂直管道
          blueVertical = this.airSourceGraph.createNode('', pX + (this.hexagonWidth * i), pY > 0 ? (pY - this.hexagonHeight + 8) : -96)
          blueVertical.image = 'blueVertical'
          blueVertical.zIndex = 3
          blueVertical.size = {width: 4, height: 82}
          currentNode.addChild(blueVertical)
          if (flag) {
            let upArrow
            // 蓝色箭头
            upArrow = this.airSourceGraph.createNode('', pX + (this.hexagonWidth * i), pY > 0 ? (pY - this.hexagonHeight + 8) : -98)
            upArrow.image = 'blueArrow'
            upArrow.zIndex = 3
            upArrow.size = {width: 10, height: 16}
            currentNode.addChild(upArrow)
            // 蓝色垂直管道
            verticalpipe = this.airSourceGraph.createNode('', pX + (this.hexagonWidth * i), (pY + this.hexagonHeight / 2 + 24))
            verticalpipe.image = 'blueVertical'
            verticalpipe.zIndex = 3
            verticalpipe.size = {width: 4, height: 50}
            currentNode.addChild(verticalpipe)
            // 蓝色箭头
            downArrow = this.airSourceGraph.createNode('', pX + (this.hexagonWidth * i), (pY + this.hexagonHeight / 2 + 8))
            downArrow.image = 'blueArrow'
            downArrow.zIndex = 3
            downArrow.size = {width: 10, height: 16}
            currentNode.addChild(downArrow)
          } else if (pY > 0) {
            // verticalpipe, downArrow
            // 蓝色垂直管道
            verticalpipe = this.airSourceGraph.createNode('', pX + (this.hexagonWidth * i), (pY + this.hexagonHeight / 2 + 24))
            verticalpipe.image = 'blueVertical'
            verticalpipe.zIndex = 3
            verticalpipe.size = {width: 4, height: 50}
            currentNode.addChild(verticalpipe)
            // 蓝色箭头
            downArrow = this.airSourceGraph.createNode('', pX + (this.hexagonWidth * i), (pY + this.hexagonHeight / 2 + 40))
            downArrow.image = 'blueArrow'
            downArrow.zIndex = 3
            downArrow.rotate = Math.PI
            downArrow.size = {width: 10, height: 16}
            currentNode.addChild(downArrow)
          }
          // flag 为假 就显示控制阀 和 蓝色向下箭头
          if (!flag) {
            // 控制阀
            blueControl = this.airSourceGraph.createNode('', pX + 5 + (this.hexagonWidth * i), pY > 0 ? (pY - this.hexagonHeight + 8) : -98)
            blueControl.image = imgHash['1010'] + targetList[i].left.status
            blueControl.zIndex = 3
            blueControl.size = {width: 20, height: 20}
            blueControl.rotate = Math.PI / 2
            // console.log(targetList[i].left.id)
            blueControl.set('hashId', targetList[i].left.id)
            currentNode.addChild(blueControl)
            // 蓝色箭头
            blueArrow = this.airSourceGraph.createNode('', pX + (this.hexagonWidth * i), pY > 0 ? (pY - this.hexagonHeight + 40) : -98 + 34)
            blueArrow.image = 'blueArrow'
            blueArrow.zIndex = 3
            blueArrow.rotate = Math.PI
            blueArrow.size = {width: 10, height: 16}
            currentNode.addChild(blueArrow)
          }
        }
      },
      // 垂直管道
      createVerticalPipe (imageName, x, y, height, flag) {
        let curNode = !flag ? this.airSourceGraph.createNode('', x, y) : this.coolingGraph.createNode('', x, y)
        curNode.image = imageName
        curNode.zIndex = 3
        curNode.size = {width: 4, height: height}
      },
      // 水平管道
      createHorizontalPipe (imageName, x, y, width, flag) {
        let curNode = !flag ? this.airSourceGraph.createNode('', x, y) : this.coolingGraph.createNode('', x, y)
        curNode.image = imageName
        curNode.zIndex = 4
        curNode.size = {width: width, height: 4}
      },
      // 公共设备的名 函数 组件
      machineName (name, x, y, flag) {
        let curNode = flag ? this.airSourceGraph.createNode(name, x, y) : this.coolingGraph.createNode(name, x, y)
        curNode.image = null
        curNode.setStyle(Q.Styles.LABEL_COLOR, '#BECEFF')
        curNode.setStyle(Q.Styles.LABEL_FONT_SIZE, 18)
      },
      // 连接车间
      conWorkshop (id, name, x, y) {
        let curNode, controlSwitch
        curNode = this.airSourceGraph.createNode(name, x, y + 28)
        curNode.image = null
        curNode.setStyle(Q.Styles.LABEL_COLOR, '#D0DEFF')
        curNode.setStyle(Q.Styles.LABEL_FONT_SIZE, 14)
        curNode.set('meterId', id)
        // 控制阀
        controlSwitch = this.airSourceGraph.createNode('', x - 50, y + 4)
        controlSwitch.image = imgHash['1012'] + 1
        controlSwitch.zIndex = 5
        controlSwitch.size = {width: 18, height: 26}
        curNode.addChild(controlSwitch)
      },
      // 定时更新冷却系统图数据
      async refCoolingSys (id) {
        let hash = {}
        let result = await window.myapi.postTimer({id: id}).then(res => {
          if (res.data.status === 200) {
            return res.data.data.data
          }
        }).catch(e => {})
        result.forEach(item => {
          if (typeof item.value !== 'number' && isNaN(item.value)) {
            item.value = 2
          }
          hash[item.id] = item
        })
        if (this.coolingGraph) {
          for (let i in hash) {
            this.coolingGraph.forEach(item => {
              if (item.get('hashId') == i || item.get('sixId') == i) {
                let status = item.image.substring(item.image.length - 1)
                if (status === hash[i].value) {
                  return false
                } else {
                  item.image = item.image.replace(status, hash[i].value)
                }
              }
            })
          }
        }
        /* window.myapi.postTimer({id: id}).then(res => {
          if (res.data.status === 200) {
            let result = res.data.data.data
            // console.log(result)
            result.forEach(item => {
              if (typeof item.value !== 'number' && isNaN(item.value)) {
                item.value = 2
              }
              hash[item.id] = item
            })
            this.coolingGraph.forEach(item => {
              for (let i in hash) {
                if (item.get('hashId') == i || item.get('sixId') == i) {
                  let status = item.image.substring(item.image.length - 1)
                  if (status === hash[i].value) {
                    return false
                  } else {
                    item.image = item.image.replace(status, hash[i].value)
                  }
                }
              }
            })
          }
        }) */
      },
      // 请求冷却系统graph图数据
      getCoolingSysData (id) {
        return new Promise((resolve, reject) => {
          new window.Api({
            ...{id: id, spaceId: this.facility}
          }, 'POST').getData().then(res => {
            if (res.data.status === 200) {
              // console.log(res)
              resolve(res.data.jsData)
            }
          })
        })
      },
      // 异步请求冷却系统图数据
      async asyncCoolingSysData (id) {
        await this.getCoolingSysData(id).then(res => {
          // this.coolingAirData = res.devices['空压机'].hosts
          let coolingAirComprData = res.devices['空压机'].hosts
          if (coolingAirComprData.length > 9) {
            this.coolingAirData = coolingAirComprData.slice(0, 9)
          } else {
            this.coolingAirData = coolingAirComprData
          }
          this.coolingTower = res.devices['冷却塔'].hosts
          this.coolingDrying = res.devices['吸干机'].hosts
          // this.coolingDryer = res.devices['冷干机'].hosts
          let coolDryer = res.devices['冷干机'].hosts
          if (coolDryer.length > 5) {
            this.coolingDryer = coolDryer.slice(0, 5)
          } else {
            this.coolingDryer = coolDryer
          }
          this.coolingPump = res.devices['冷却泵'].hosts
        })
        this.canvasCooling()
      },
      // 初始化冷却系统graph图
      initCoolingGraph () {
        if (this.coolingGraph === null) {
          this.coolingGraph = new Q.Graph('cooling-system')
          // 禁止编辑图元
          this.coolingGraph.editable = false
          // 禁止双击放大
          this.coolingGraph.enableDoubleClickToOverview = false
          // 禁止拖拉图元
          this.coolingGraph.interactionMode = Q.Consts.INTERACTION_MODE_VIEW
          this.coolingGraph.originAtCenter = false
          this.coolingGraph.moveToCenter()
          this.coolingGraph.onclick = evt => {
            // if (evt.getData() instanceof Q.Node) {
            //   // Q.log(evt)
            //   var p = this.airSourceGraph.globalToLocal(evt)
            //   // Q.log(p.x, p.y)
            //   this.coolingGraph.centerTo(p.x, p.y, 1)
            // }
            var node = this.coolingGraph.getElementByMouseEvent(evt)
            if (node === undefined) {
              // 点空白地方，移到画布中心显示
              this.coolingGraph.moveToCenter()
            }
          }
          // this.coolingGraph.ondblclick = evt => {
          //   var node = this.coolingGraph.getElementByMouseEvent(evt)
          //   if (node === undefined) {
          //     // 点空白地方，移到画布中心显示
          //     this.coolingGraph.moveToCenter()
          //   }
          // }
          this.coolingGraph.isSelectable = function () {
            return false
          }
        }
      },
      // 绘画冷却系统图的方法
      canvasCooling () {
        // 机械图元
        this.machineNode(this.coolingAirData, -400, -196, 6, 36, 'blueVertical', 'cyanVertical', 'blueArrow', 'cyanArrow', true)
        this.machineNode(this.coolingTower, 410, -196, 6, 52, 'blueVertical', 'cyanVertical', 'blueArrow', 'cyanArrow')
        this.machineNode(this.coolingDrying, -400, 196, 6, 52, 'cyanVertical', 'blueVertical', 'cyanArrow', 'blueArrow', true)
        this.machineNode(this.coolingDryer, -130, 196, 6, 36, 'cyanVertical', 'blueVertical', 'cyanArrow', 'blueArrow', true)
        this.machineNode(this.coolingPump, 410, 196, 6, 45, 'cyanVertical', 'cyanVertical', 'cyanArrow', 'cyanArrow')
        // 机械名
        this.machineName('空压机', -400, -316)
        this.machineName('冷却塔', 410, -316)
        this.machineName('干燥机', -400, 316)
        this.machineName('冷干机', -130, 316)
        this.machineName('冷却泵', 410, 316)
        // 垂直管道 **** 空压机 --- 干燥机
        this.createVerticalPipe('blueVertical', -400 - this.hexagonWidth - 6 - 2, 0, this.hexagonHeight * 6 + 8, true)
        // 水平管道**** 空压机 --- 冷却塔上面的横管道
        this.createHorizontalPipe('blueHorizontal', (-400 - this.hexagonWidth - 6 - 2) + 45 * 10 + 4, -196 - this.hexagonHeight / 2 - 46, 90 * 10 + 8, true)
        // 干燥机下面的横管道
        // this.createHorizontalPipe('blueHorizontal', -394 - this.hexagonWidth / 2 - 1, 196 + this.hexagonHeight / 2 + 48, 102, true)
        this.createHorizontalPipe('blueHorizontal', (-400 - this.hexagonWidth - 6 - 2) + 49, 196 + this.hexagonHeight / 2 + 46, 98, true)
        // 干燥机 --- 冷干机 下面的横管道
        this.createHorizontalPipe('blueHorizontal', -394 + (this.coolingDrying.length + 1) * 45, 196 + this.hexagonHeight / 2 + 46, ((this.coolingDrying.length + 1) * 90), true)
        // 干燥机 上面的横管道
        this.createHorizontalPipe('cyanHorizontal', -394 + (this.coolingDrying.length + 1) * 45, 196 - this.hexagonHeight - 46, ((this.coolingDrying.length + 1) * 90), true)
        // 干燥机 冷干机 上面的横管道
        this.createHorizontalPipe('cyanHorizontal', -124 + (this.coolingDryer.length) * 45, 196 - this.hexagonHeight - 46, ((this.coolingDryer.length) * 90), true)
        // 干燥机 冷干机 下面的横管道
        this.createHorizontalPipe('blueHorizontal', -124 + (this.coolingDryer.length - 1) * 45, 196 + this.hexagonHeight / 2 + 46, ((this.coolingDryer.length - 1) * 90), true)
        // 空压机
        // 空压机 下面的管道
        this.createHorizontalPipe('cyanHorizontal', -394 + (45 * 8), -196 + this.hexagonHeight + 45, 90 * 8, true)
        // 垂直管道 ****
        // 冷却泵 -- 空压机
        this.createVerticalPipe('cyanVertical', 404 - this.hexagonWidth + 6, (96 * 3 + 59) / 2 - 56, 96 * 3 + 61, true)
        // 冷却塔 --- 冷却泵
        this.createVerticalPipe('cyanVertical', 416, 0, 112, true)
        // 水平管道
        // 冷却塔上面的横管道
        this.createHorizontalPipe('blueHorizontal', 416 + (this.coolingTower.length - 1) * 45, -196 - this.hexagonHeight / 2 - 46, ((this.coolingTower.length - 1) * 90), true)
        // 冷却塔下面的横管道
        this.createHorizontalPipe('cyanHorizontal', 416 + (this.coolingTower.length - 1) * 45, -196 + this.hexagonHeight / 2 + 93, ((this.coolingTower.length - 1) * 90), true)
        // 冷却塔上面的横管道
        this.createHorizontalPipe('cyanHorizontal', 416 + (this.coolingPump.length - 1) * 45, 196 - this.hexagonHeight / 2 - 94, ((this.coolingPump.length - 1) * 90), true)
        // 冷却塔下面的横管道
        this.createHorizontalPipe('cyanHorizontal', 416 - 45, 196 + this.hexagonHeight / 2 + 46, 92, true)
        this.createHorizontalPipe('cyanHorizontal', 416 + (this.coolingPump.length - 1) * 45, 196 + this.hexagonHeight / 2 + 46, ((this.coolingPump.length - 1) * 90), true)
      },
      // 冷却系统图设备方法
      machineNode (targetArr, x, y, distance, heightSize, color1 = 'blueVertical', color2 = 'cyanVertical', color3 = 'blueArrow', color4 = 'cyanArrow', flag) {
        let curNode, index, hexagon, verticalPipeUp, verticalPipeDown, verticalPipeUpArrow, verticalPipeDownArrow,
          controlSwitch
        for (let i = 0; i < targetArr.length; i++) {
          x += distance
          index = targetArr[i].name.indexOf('#')
          curNode = this.coolingGraph.createNode(targetArr[i].name.substring(0, index + 1), (x + this.hexagonWidth * i), y)
          // curNode.setStyle(Q.Styles.LABEL_ALIGN_POSITION, Q.Position.CENTER_TOP)
          curNode.setStyle(Q.Styles.LABEL_PADDING, heightSize > 60 ? (-heightSize - 12) : (heightSize > 40 && heightSize < 60) ? (-heightSize - 15) : (-heightSize - 20))
          curNode.setStyle(Q.Styles.BACKGROUND_COLOR, null)
          curNode.setStyle(Q.Styles.PADDING, 10)
          curNode.size = {height: heightSize}
          curNode.image = imgHash[targetArr[i].pic] + targetArr[i].status
          // curNode.image = imgHash[targetArr[i].name.substring(index + 1)] + targetArr[i].status
          curNode.zIndex = 2
          curNode.set('hashId', targetArr[i].id)
          if (targetArr[i].status === 2) {
            curNode.setStyle(Q.Styles.LABEL_COLOR, '#CB404A')
          } else {
            curNode.setStyle(Q.Styles.LABEL_COLOR, '#BECEFF')
          }
          // 六边形
          hexagon = this.coolingGraph.createNode('', x + this.hexagonWidth * i, y)
          hexagon.image = 'sixEdge' + targetArr[i].status
          hexagon.zIndex = 1
          hexagon.size = {width: this.hexagonWidth, height: this.hexagonHeight}
          hexagon.set('sixId', targetArr[i].id)
          curNode.addChild(hexagon)
          // 管道
          // end
          // 竖直管道和箭头 start
          verticalPipeUp = this.coolingGraph.createNode('', x + this.hexagonWidth * i, y > 0 ? (y - this.hexagonHeight / 2 - 48) : (y - this.hexagonHeight / 2 - 24))
          verticalPipeUp.image = color1
          verticalPipeUp.zIndex = 1
          verticalPipeUp.size = {width: 4, height: y > 0 ? 96 : 48}
          // curNode.addChild(verticalPipeUp)
          verticalPipeDown = this.coolingGraph.createNode('', x + this.hexagonWidth * i, y > 0 ? (y + this.hexagonHeight / 2 + 24) : (y + this.hexagonHeight / 2 + 47))
          verticalPipeDown.image = color2
          verticalPipeDown.zIndex = 1
          verticalPipeDown.size = {width: 4, height: y > 0 ? 48 : 96}
          // curNode.addChild(verticalPipeDown)
          if (flag) {
            // 控制阀
            controlSwitch = this.coolingGraph.createNode('', x + 5 + (this.hexagonWidth * i), y > 0 ? (y - this.hexagonHeight / 2 - 48) : (y + this.hexagonHeight / 2 + 48))
            controlSwitch.image = imgHash['1010'] + targetArr[i].left.status
            controlSwitch.zIndex = 3
            controlSwitch.size = {width: 20, height: 20}
            controlSwitch.rotate = Math.PI / 2
            controlSwitch.set('hashId', targetArr[i].left.id)
            curNode.addChild(controlSwitch)
          }
          if (flag && y < 0) {
            // 上箭头
            verticalPipeUpArrow = this.coolingGraph.createNode('', x + this.hexagonWidth * i, y - this.hexagonHeight / 2 - 48 + 10)
            verticalPipeUpArrow.image = color3
            verticalPipeUpArrow.zIndex = 4
            // verticalPipeUpArrow.rotate = Math.PI / 1
            verticalPipeUpArrow.size = {width: 10, height: 16}
            // 下箭头
            verticalPipeDownArrow = this.coolingGraph.createNode('', x + this.hexagonWidth * i, y + this.hexagonHeight / 2 + 8)
            verticalPipeDownArrow.image = color4
            verticalPipeDownArrow.zIndex = 4
            // verticalPipeDownArrow.rotate = Math.PI
            verticalPipeDownArrow.size = {width: 10, height: 16}
          } else {
            // 上箭头
            verticalPipeUpArrow = this.coolingGraph.createNode('', x + this.hexagonWidth * i, y > 0 ? (y - this.hexagonHeight / 2 - 9) : (y - this.hexagonHeight / 2 - 9))
            verticalPipeUpArrow.image = color3
            verticalPipeUpArrow.zIndex = 4
            verticalPipeUpArrow.rotate = Math.PI / 1
            verticalPipeUpArrow.size = {width: 10, height: 16}
            // 下箭头
            verticalPipeDownArrow = this.coolingGraph.createNode('', x + this.hexagonWidth * i, y > 0 ? (y + this.hexagonHeight / 2 + 48 - 10) : (y + this.hexagonHeight / 2 + 96 - 10))
            verticalPipeDownArrow.image = color4
            verticalPipeDownArrow.zIndex = 4
            verticalPipeDownArrow.rotate = Math.PI / 1
            verticalPipeDownArrow.size = {width: 10, height: 16}
          }
        }
      }
    },
    destroyed () {
      clearTimeout(this.monTimer)
      // 清除气源系统图数据 || 冷却系统图数据 的定时器
      clearTimeout(this.timer)
      // 7月01日以后新需求变更的 定时器
      // clearTimeout(this.commonTime)
      // 清除空压下的供气计量定时器
      clearTimeout(this.airComOneTime)
      // 清除空压下的供气总装车间定时器
      clearTimeout(this.AirComTotalTime)
      window.clearInterval(this.AirLabelTime)
    },
    components: {mTabs, lineTip, selectBtn}
  }
</script>

<style lang='scss' scoped>
  #monitoring {
    @include monitoring;

    #main-l {
      display: flex;
      align-items: center;
      justify-content: center;

      #cooling-system {
        width: 100%;
        height: 100%;
      }

      #air-source-system {
        width: 100%;
        height: 100%;
      }
    }

    #wrapper {
      #onePipeAir {
        width: 100%;
        height: 100%;
      }
    }

    #alpie {
      width: 100%;
      height: 530px;

      #all-pipe-air {
        width: 100%;
        height: 100%;
      }
    }
  }
</style>
